@charset 'UTF-8';
@import '../../config/scss/function.scss',
'../../config/scss/config.scss';
.reservation {
    background-image: url('./imgs/new_appoint.png');
    background-repeat: no-repeat no-repeat;
    background-size:100% 100%;
    @include fullscreen;
    @include setpadding;
    .reservation-content{
      margin-top: 100px;
      margin-bottom: 200px;
      background-color: #fff;
      min-height: 450px;
      display: flex;

      .left-side{
        display: flex;
        flex-grow: 1;
        background-color: $c1;

        .list-group{
          display: flex;
          flex-grow: 1;
          flex-flow: column nowrap;
          .list-group-item{
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            border: 0;
            background-color: inherit;

            .step-title{
              font-size: 18px;
              color: #fff;
              width: 15px;
              // -webkit-writing-mode:vertical-lr;
              // writing-mode:tb-rl;
              // writing-mode:vertical-lr;
            }

            .caret {
                width: 0;
                height: 0;
                border: 9px solid transparent;
                border-right: 9px solid #fff;
                position: absolute;
                right: 0;
                top: 50%;
            }

            &.step1 {
                background: url('./imgs/re01.png') center 30% no-repeat;
            }
            &.step2 {
                background: url('./imgs/re02.png') center 30% no-repeat;
            }
            &.step3 {
                background: url('./imgs/re03.png') center 30% no-repeat;
            }
            &.step1, &.step2, &.step3 {
              background-repeat: no-repeat;
              background-position: center center;
              background-size: auto;
            }
          }
        }

      }
    }

    .col-xs-items{
      background-color: $c1;
    }

    @media screen and (max-width: 768px) {
      background-image: none;
      padding: 0;

      .reservation-content{
        display: inline;
        margin-top: 0;
      }

      .col-xs-item{
        display: flex;
        flex-flow: column nowrap;
        padding: 16px 0;
        color: #fff;
        .caret {
            width: 0;
            height: 0;
            border: 9px solid transparent;
            border-right: 9px solid #fff;
            position: absolute;
            left: 40%;
            bottom: 0;
            transform: rotate(90deg);
        }
        &.step1 {
            background: url('./imgs/re01.png');
        }
        &.step2 {
            background: url('./imgs/re02.png');
        }
        &.step3 {
            background: url('./imgs/re03.png');
        }
        &.step1, &.step2, &.step3 {
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 30%;
        }
      }
    }
}